<template>
	<view>
		<view class="popupTop posRel">
			<view class="tit">答题卡</view>
			<view class="rightQuesNum posAbso">
				<view class="iconfont icon-caidan"></view>
				<view><text class="currQuesNum">{{currIndex}}</text>/{{queLen}}</view>
			</view>
		</view>
		<!-- ,queList[index].isCompFlag ? 'active' : '' currIndex == index+1 ? 'active_dashed' : '',queList[index].currAns != '' ? 'active' : ''-->
		<view class="popupCon clearfix">
			<scroll-view scroll-y class="scrollView">
				<!-- :class="[currIndex == index+1 ? 'active' : '',queList[index].currAns != '' ? 'activeFull' : '']" -->
				<view class="listQuesNum"
					:class="cardClasses(index)"
					v-for="(item,index) in queLen"
					:key="index"
					@tap="switchQue(index+1,index)"
				>{{index+1}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currIndex:Number,
			queLen:Number,
			queList:Array
		},
		computed:{
			cardClasses(){
				return function(index){
					return{
						'active' : this.currIndex == (index+1),
						'rightAns': this.queList[index].result == 1,
						'errorAns': this.queList[index].result == 0
					}
				}
			}
		},
		methods:{
			switchQue(nextIndex,index){
				this.$emit('switchQue',nextIndex,index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupTop{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: $pss-text-color3;
		border-bottom: 1rpx solid #eee;
		@include respTo(phone){
			font-size: $font-size30; 
		}
		@include respTo(pad){
			font-size: $padSize24; 
		}
		.rightQuesNum{
			height: 100%;
			right: 30rpx;
			top: 0;
			display: flex;
			color: $pss-text-color8;
			@include respTo(phone){
				font-size: $font-size30; 
			}
			@include respTo(pad){
				font-size: $padSize22; 
			}
			.icon-caidan{
				margin-right: 5rpx;
				@include respTo(phone){
					font-size: $font-size30; 
				}
				@include respTo(pad){
					font-size: $padSize22; 
				}
			}
		}
	}
	.popupCon{
		padding: 30rpx;
		max-height: 1000rpx;
		overflow: hidden;
		.scrollView{
			max-height:1000rpx;
		}
		.listQuesNum{
			@include respTo(phone){
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: $font-size34;
				&:nth-of-type(6n){
					margin-right: 0;
				}
			}
			@include respTo(pad){
				width: 62rpx;
				height: 62rpx;
				line-height: 62rpx;
				font-size: $padSize22; 
				&:nth-of-type(8n){
					margin-right: 0;
				}
			}
			text-align: center;
			border-radius: 50%;
			border: 1rpx solid #eee;
			color: $pss-text-color3;
			margin:0 24rpx 30rpx 0;
			float: left;
			&.active{
				border: 1rpx solid $pss-color-primary_1;
				color: #fff;
				background: $pss-color-primary_1;
			}
			&.rightAns{
				border: 1px solid #e9f8f3;
				background: #e9f8f3;
				color: $pss-color-green;
			}
			&.errorAns{
				border: 1px solid #ffe2de;
				background: #ffe2de;
				color: $pss-color-red;
			}
		}
	}
</style>